<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>electron-note</title>
    <meta
      http-equiv="Content-Security-Policy"
      content="script-src 'self' 'unsafe-inline';"
    />
    <link rel="stylesheet" href="loader.css" />
  </head>
  <body style="background: white">
    <nav></nav>
    <br />
    <div class="container">
      <h2><i class="fa fa-fill-drip"></i> 界面配色</h2>
      <select id="skinSelect">
        <option value="light">白茶 Light</option>
        <option value="dark">暗灰 Dark</option>
        <option value="cyan">靛蓝 Cyan</option>
        <option value="sakura">樱花 Sakura</option>
        <option value="teal">薄荷 Teal</option>
        <option value="red">朱红 Red</option>
        <option value="lemon">柠檬 Lemon</option>
        <option value="indigo">紫罗兰 Indigo</option>
        <option value="autumn">晚秋 Autumn</option>
      </select>
      <br />
      <button
        type="button"
        class="btn btn-success btn-sm"
        onclick="changeSkin()"
      >
        <i class="fa fa-palette"></i> 应用此样式
      </button>
      <button
        type="button"
        class="btn btn-primary btn-sm"
        onclick="changeDefaultSkin()"
      >
        <i class="fa fa-backspace"></i> 重置为默认值
      </button>

      <hr />
      <h2><i class="fa fa-info-circle"></i> 关于和软件更新</h2>
      <p>当前版本：<span id="software_version"></span></p>
      <b
        ><p>
          本软件是自由软件；您可以在自由软件基金会发布的
          GPL v3 许可证下重新发布或修改它；
        </p>

      <p>
        发布本软件的目的是希望它能够在一定程度上帮到您。但我们并不为它提供任何形式的担保，也无法保证它可以在特定用途中得到您希望的结果。
      </p>
      </b
      >
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="shell.openExternal(`https://gitee.com/baiyang-lzy/electron-note`)">
        <i class="fa fa-code"></i> 获取本软件的源代码
      </button>
      <button type="button" class="btn btn-outline-primary btn-sm" onclick="shell.openExternal(`https://www.gnu.org/licenses/gpl-3.0.html`)">
        <i class="fa fa-external-link-alt"></i> 获取 GPL v3 许可证的副本
      </button>
      <br /><br />
      <button type="button" class="btn btn-primary btn-sm" onclick="showTPLN()"><i class="fa fa-external-link-alt"></i>  click here to display Third Party Legal Notices</button>
      <br /><br />

    </div>
    <script src="app.js"></script>
    <script>
      $.ajax({
        method: "GET",
        url: "./app.json",
        success: (data) => {
          $("#software_version").text(data.version);
          $("#software_version").append("（" + data.version_type + "）");
        },
      });

      storage.has("skin", function (error, hasKey) {
        if (error) throw error;

        if (hasKey) {
          storage.get("skin", function (error, data) {
            if (error) throw error;

            let skin = data.skin;
            $("#skinSelect").val(skin);
          });
        }
      });

      let changeSkin = () => {
        let changeToSkinName = $("#skinSelect").val();

        storage.set("skin", { skin: changeToSkinName }, function (err) {
          window.location.reload();
        });
      };

      let changeDefaultSkin = () => {
        storage.set("skin", { skin: "light" }, function (err) {
          window.location.reload();
        });
      };
    </script>
  </body>
</html>
